<template>
  <div class="fddsfa">
    <Back />
    <div class="dk">
      <div
        v-for="item in list"
        :key="item.couponId"
        :class="'a' + item.couponMoney"
      >
        <div class="nk">
          <span>学习优惠卷</span>
          <dl>
            <dd>购物满{{ item.couponQuota }}元可用</dd>
            <dd>
              使用日期:{{ item.couponStartTime }}--{{ item.couponEndTime }}
            </dd>
          </dl>
        </div>
        <div class="nk2">
          <p>
            ￥<span>{{ item.couponMoney }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDiscount } from "@/api";
export default {
  data() {
    return {
      id: 1,
      list: [],
    };
  },
  created() {
    getDiscount({
      userId: this.id,
    }).then((res) => {
      this.list = res.data.data;
    });
  },
};
</script>

<style scoped>
.fddsfa{
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  margin-bottom: 10vh;
}
.dk {
  margin-top: 8vw;
  overflow: hidden;
  color: #fff;
}
.dk div {
  width:95vw;
  margin: 0 auto;
  padding-left: 3vw;
  box-sizing: border-box;
  height: 40vw;
  margin-bottom: 3vw;
  display: flex;
}
.dk .a5 {
  margin-top: 3vh;
  margin-bottom: 3vh;
  border-radius: 4vw;
  background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}
.a10 {
  border-radius: 4vw;
  background-image: linear-gradient(
    120deg,
    rgb(212, 252, 121) 0%,
    rgb(150, 230, 161) 100%
  );
}
.a15 {
  background-image: linear-gradient(
    120deg,
    rgb(161, 196, 253) 0%,
    rgb(194, 233, 251) 100%
  );
}
.a20 {
  background-image: linear-gradient(
    to top,
    rgb(253, 219, 146) 0%,
    rgb(209, 253, 255) 100%
  );
}
.nk {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 8vw;
}
.dk .nk span {
  font-size: 4vw;
  font-weight: 900;
}
.nk dd {
  margin: 0;
  font-size: 2.5vw;
  font-weight: 800;
}
.nk2 p {
  font-size: 6vw;
}
.nk2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}
.nk2 p {
  margin-top: 3vh;
  font-size: 6vw;
}
.nk2 p span {
  font-size: 13vw;
  line-height: 25vw;
}
</style>